import { ExportOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDateTimeRangePicker, ProFormSelect } from '@ant-design/pro-form';
import { Button, Form } from 'antd';
import moment from 'moment';
import { useState } from 'react';
import { exportIotSim } from '../service';

const ExportModal = () => {
  const [form] = Form.useForm();
  const [chillDowning, setChillDowning] = useState<number>(0);
  const mapProvider = new Map().set('tibiot', '齐犇').set('upiot', '量讯').set('dahan', '大汉三通');
  if (chillDowning > -1) {
    setTimeout(() => {
      setChillDowning(chillDowning - 1);
    }, 1000);
  }
  return (
    <ModalForm<{
      provider: string;
      dateTimeRange: [moment.Moment, moment.Moment];
    }>
      title="导出流量卡"
      submitter={false}
      layout="horizontal"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      width={750}
      form={form}
      modalProps={{
        destroyOnClose: true,
      }}
      trigger={
        <Button>
          <ExportOutlined /> 数据导出
        </Button>
      }
    >
      <ProFormSelect
        label="卡供应商"
        name="provider"
        placeholder="请选择卡供应商"
        width="lg"
        options={[
          {
            label: '齐犇',
            value: 'tibiot',
          },
          {
            label: '量讯',
            value: 'upiot',
          },
          {
            label: '大汉三通',
            value: 'dahan',
          },
        ]}
      />
      <ProFormDateTimeRangePicker width="lg" name="dateTimeRange" label="过期时间" />
      <div
        style={{
          margin: '0 auto',
          width: '65%',
          padding: '15px 15px',
          verticalAlign: 'middle',
          background: '#f4f6fa',
        }}
      >
        {`按供应商导出流量卡, 单次导出目前限制10000张卡`}
      </div>
      <Button
        type="primary"
        style={{
          margin: '20px auto',
          display: 'block',
          textAlign: 'center',
        }}
        disabled={chillDowning > 0}
        onClick={async () => {
          const { provider, dateTimeRange } = await form.validateFields();

          setChillDowning(60);
          const res = await exportIotSim({
            provider,
            dateTimeRange: dateTimeRange.map((item: moment.Moment) => item?.toDate()),
          });
          // let filename = mapProvider.get(provider) || '全部';
          let filename = '全部';
          if (provider) {
            filename = mapProvider.get(provider);
          } else if (dateTimeRange && dateTimeRange.length > 0) {
            filename = `过期时间${moment(dateTimeRange[0]).format('YYYYMMDDHHmmss')}至${moment(
              dateTimeRange[1],
            ).format('YYYYMMDDHHmmss')}`;
          }
          filename += `_${moment().format('YYYY_MM_DD_HHmmss')}.xlsx`;
          const downloadElement = document.createElement('a');
          const herf = window.URL.createObjectURL(
            new Blob([res], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            }),
          );
          downloadElement.href = herf;
          downloadElement.download = filename;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(herf); // 释放blob对象
          return true;
        }}
      >
        {chillDowning <= 0 ? '点击下载Excel格式文件' : `等待（${chillDowning}）`}
      </Button>
    </ModalForm>
  );
};

export default ExportModal;
